<template>
    <main class="page-bg" id="canvasDom">
        <header class="header-box flex-between">
            <section>2024年7月30日20:26:54</section>
            <section class="header-name flex-center">XX银行实时监控平台</section>
            <section data-html2canvas-ignore="true">
                <ScreenshotKit :downloadName="'XX银行实时监控平台'" />
            </section>
        </header>

        <section class="main-box">
            <n-grid x-gap="16" cols="4" item-responsive responsive="screen">
                <n-grid-item>
                    <section class="chart-box">
                        <header class="chart-box-title">机具实时业务总量：<span>234245</span><em class="ml8">笔</em></header>
                        <MoreLines v-if="cshow" :canvasHeight="200" :data="mlineData" />
                    </section>
                    <section class="chart-box">
                        <header class="chart-box-title">机具运行情况<em>(7天) 总数</em>：<span>245</span><em class="ml8">台</em></header>
                        <MoreBars v-if="cshow" :canvasHeight="200" :data="mbData" />
                    </section>
                </n-grid-item>
                <n-grid-item span="0 m:1 l:2">
                    <section class="chart-box">
                        <n-grid x-gap="12" :cols="2">
                            <n-gi>
                                <section class="map-box">
                                    <header class="chart-box-title">网点及设备分布情况一览 <em>网点总数</em><span>245</span><em class="ml8">个</em></header>
                                    <LiaoNingMap v-if="cshow" :canvasHeight="462" :data="lnData" />
                                </section>
                            </n-gi>
                            <n-gi>
                                <section class="table-box">
                                    <p class="flex-end">故障处理<n-icon size="14" class="ml8" :color="'#ebb632'"><WarningOutline/></n-icon> </p>
                                    <n-data-table 
                                        size="small"
                                        :columns="columns" 
                                        :data="data"
                                        :style="{ height: `432px` }"
                                        flex-height
                                        :bordered="true"
                                        :single-line="true"
                                        :row-class-name="rowClassName"
                                    />
                                </section>
                            </n-gi>
                        </n-grid>
                    </section>
                </n-grid-item>
                <n-grid-item>
                    <section class="chart-box">
                        <header class="chart-box-title">机具实时订单总量：<span>234245</span><em class="ml8">笔</em></header>
                        <LineArea v-if="cshow" :canvasHeight="200" :data="laData" />
                    </section>
                    <section class="chart-box">
                        <header class="chart-box-title">接待客户总数：<span>4245</span><em class="ml8">位</em></header>
                        <CrossBar v-if="cshow" :canvasHeight="200" :data="cbData" />
                    </section>
                </n-grid-item>
            </n-grid>
            <section class="chart-box">
                <header class="chart-box-title flex-start pl20">机具近百日销量统计</header>
                <LongDataBar v-if="cshow" :canvasHeight="280" :data="ldbData" />
            </section>
            <n-grid x-gap="16" cols="2">
                <n-grid-item class="chart-box">
                    <header class="chart-box-title flex-start pl20">机具使用机构分布图</header>
                    <EffectScatterChart v-if="cshow" :canvasHeight="280" :data="escData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <header class="chart-box-title flex-start pl20">机具使用机构分布图</header>
                    <StackLineArea v-if="cshow" :canvasHeight="280" :data="slaData"  />
                </n-grid-item>
            </n-grid>
            <n-grid x-gap="16" cols="8">
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <!-- <CustomGugeChart v-if="cshow" :canvasHeight="180" :data="escData" /> -->
                    <n-el>
                        <n-progress
                            type="multiple-circle"
                            :stroke-width="6"
                            :circle-gap="0.5"
                            :percentage="[
                            percentage,
                            (percentage + 10) % 100,
                            (percentage + 20) % 100,
                            (percentage + 60) % 100,
                            ]"
                            :color="[
                            'var(--info-color)',
                            'var(--success-color)',
                            'var(--warning-color)',
                            'var(--error-color)',
                            ]"
                            :rail-style="[
                            { stroke: 'var(--info-color)', opacity: 0.3 },
                            { stroke: 'var(--success-color)', opacity: 0.3 },
                            { stroke: 'var(--warning-color)', opacity: 0.3 },
                            { stroke: 'var(--error-color)', opacity: 0.3 },
                            ]"
                        >
                            <div style="text-align: center;color: #ffffff;">
                            XX进度
                            </div>
                        </n-progress>
                    </n-el>
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <PiePadAngle v-if="cshow" :canvasHeight="200" :data="ppaData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <FunnelChart v-if="cshow" :canvasHeight="200" :data="fcData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <GaugeChart v-if="cshow" :canvasHeight="200" :data="gcData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <GaugeChart v-if="cshow" :canvasHeight="200" :data="gcData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <FunnelChart v-if="cshow" :canvasHeight="200" :data="fcData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <PiePadAngle v-if="cshow" :canvasHeight="200" :data="ppaData" />
                </n-grid-item>
                <n-grid-item class="chart-box">
                    <h4 class="pl20">标题</h4>
                    <!-- <CustomGugeChart v-if="cshow" :canvasHeight="180" :data="escData" /> -->
                    <n-el>
                        <n-progress
                            type="multiple-circle"
                            :stroke-width="6"
                            :circle-gap="0.5"
                            :percentage="[
                            percentage,
                            (percentage + 10) % 100,
                            (percentage + 20) % 100,
                            (percentage + 60) % 100,
                            ]"
                            :color="[
                            'var(--info-color)',
                            'var(--success-color)',
                            'var(--warning-color)',
                            'var(--error-color)',
                            ]"
                            :rail-style="[
                            { stroke: 'var(--info-color)', opacity: 0.3 },
                            { stroke: 'var(--success-color)', opacity: 0.3 },
                            { stroke: 'var(--warning-color)', opacity: 0.3 },
                            { stroke: 'var(--error-color)', opacity: 0.3 },
                            ]"
                        >
                            <div style="text-align: center;color: #ffffff;">
                            ZZ占比
                            </div>
                        </n-progress>
                    </n-el>
                </n-grid-item>
            </n-grid>
        </section>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, h } from 'vue'
import { WarningOutline, PhonePortrait } from '@vicons/ionicons5'
import MoreLines from '@/components/charts12/MoreLines.vue';
import MoreBars from '@/components/charts12/MoreBar.vue';
import CrossBar from '@/components/charts12/CrossBar.vue';
import LineArea from '@/components/charts12/LineArea.vue';
import LiaoNingMap from '@/components/maps/LiaoNingMap.vue';
import LongDataBar from '@/components/charts12/LongDataBar.vue';
import EffectScatterChart from '@/components/charts12/EffectScatterChart.vue';
import StackLineArea from '@/components/charts12/StackLineArea.vue';
import CustomGugeChart from '@/components/charts12/CustomGugeChart.vue';
import PiePadAngle from '@/components/charts12/PiePadAngle.vue';
import FunnelChart from '@/components/charts12/FunnelChart.vue';
import GaugeChart from '@/components/charts12/GaugeChart.vue';
import ScreenshotKit from '@/components/common/ScreenshotKit.vue';
import { NIcon } from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
const cshow = ref(false)
let mlineData = reactive({ xAxisDataList: [], seriesDataList: [] })
let mbData = reactive({ xAxisDataList: [], seriesDataList: [] })
let laData = reactive({ xAxisDataList: [], seriesDataList: [] })
let cbData = reactive({ xAxisDataList: [], seriesDataList: [] })
let ldbData = reactive({ xAxisDataList: [], seriesDataList: [] })
let escData = reactive({ seriesDataListO: [], seriesDataListT: []})
let slaData = reactive({ xAxisDataList: [], seriesDataList: []})
let lnData =  reactive([])
let ppaData =  reactive({ seriesDataList: [] })
let fcData =  reactive({ seriesDataList: [] })
let gcData =  reactive({ seriesDataList: [] })
const percentage = ref(20)
type RowData = {
    depart: string,
    tool: string,
    user: string,
    phone: string
}
let data = reactive(<Array<object>>[])
let columns = reactive(<TableColumn<RowData>>[]) 
let height = ref(300)
let rowClassName = (row: RowData) => {
    return 'row-data'
}
const createColumns = ():DataTableColumns<RowData> => {
  return [
    { title: '序号',align: 'center',width: 40,
        render (row, i) {
            return h('span', (i+1)<10 ? '0'+(i+1) : (i+1))
        }
    },
    { title: '机构', key: 'depart', align: 'center' },
    { title: '机具', key: 'tool', align: 'center'},
    { title: '负责人', key: 'user', align: 'center', width: 120,},
    { title: '电话', key: 'phone', align: 'center', width: 120,
        render (row) {
            return [h(
                NIcon,
                {
                    size: 16,
                    color: '#15e6cd60',
                    style: {
                        verticalAlign: 'bottom',
                        marginRight: '4px'
                    }
                },
                {
                    default: () => h(PhonePortrait)
                }
            ), h('span', row.phone)] // h('span', ['多个','数组','划分'])
        }
    }
  ]
}
const init = () => {
    mlineData.xAxisDataList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    mlineData.seriesDataList = [
        {
            name: '发卡机',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '存票机',
            type: 'line',
            stack: 'Total',
            data: [320, 332, 301, 334, 390, 330, 320]
        },
        {
            name: '存单收音机',
            type: 'line',
            stack: 'Total',
            data: [820, 932, 901, 934, 490, 230, 120]
        }
    ]
    laData.xAxisDataList = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    laData.seriesDataList = [820, 932, 901, 934, 490, 230, 120]

    mbData.xAxisDataList = ['发卡机','存票机','存单收音机']
    mbData.seriesDataList = [
        {
            name: "发卡",
            data: [9000, 8000, 8500]
        },
        {
            name: "存票",
            data: [8000, 7200, 8500]
        },
        {
            name: "存单收音",
            data: [8000, 7200, 8500]
        }
    ].map(m => {
        m['type'] = "bar"
        m['barWidth'] = 12
        m['itemStyle'] = {borderRadius: 20}
        return m
    })

    cbData.xAxisDataList = ['接待1','接待2','接待3','接待4']
    cbData.seriesDataList = [900, 800, 850, 990]

    lnData.push(...[
        { id: 'dl', color: "#0048fb", name: "大连市", pos: [121.618622,38.91459] , remark: "网点数量：99个" },
        { id: 'as', color: "#df581e", name: "鞍山市", pos: [122.995632,41.110626], remark: "网点数量：89个" },
        { id: 'bx', color: "#fadb12", name: "本溪市", pos: [123.770519,41.297909], remark: "网点数量：79个" },
        { id: 'yk', color: "#11e5cf", name: "营口市", pos: [122.235151,40.667432], remark: "网点数量：69个" },
        { id: 'tl', color: "#7dcc86", name: "铁岭市", pos: [123.844279,42.290585], remark: "网点数量：59个" },
        { id: 'jz', color: "#bfc249", name: "锦州市", pos: [121.135742,41.119269], remark: "网点数量：39个" },
        { id: 'zy', color: "#edb036", name: "朝阳市", pos: [120.451176,41.576758], remark: "网点数量：69个" },
        { id: 'hld',color: "#05a9c1", name: "葫芦岛市", pos: [120.856394,40.755572], remark: "网点数量：69个" },
        { id: 'fx', color: "#11e5cf", name: "阜新市", pos: [121.648962,42.011796], remark: "网点数量：69个" },
        { id: 'fx', color: "#bfc249", name: "丹东市", pos: [124.383044,40.124296], remark: "网点数量：69个" },
    ])

    columns = createColumns()
    for (let index = 0; index < 20; index++) {
        let i = ((index+1)>10 ? index : '0'+index)
        let obj = {
            depart: "机构"+i,
            tool: "机具"+i,
            user: "负责人00"+i,
            phone: "136****34"+i
        }
        data.push(obj)
    }

    for (let index = 0; index < 100; index++) {
        let num = Math.floor(Math.random() * (1000 - 10 + 10)) + 10;
        ldbData.xAxisDataList.push('第'+(index+1)+'天')
        ldbData.seriesDataList.push(num)
    }
   
    escData.seriesDataListO = [
        [172.7, 105.2], [153.4, 42], [129.1, 47.6],[163.0, 62.0],[139.1, 57.6],
    ]
    escData.seriesDataListT = [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
        [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
        [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
        [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
        [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
        [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
        [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
        [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
        [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
        [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
        [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
        [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
        [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
        [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
        [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
        [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
        [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
        [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
        [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
        [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
        [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
        [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
        [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
        [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
        [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
        [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
        [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
        [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
        [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
        [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
        [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
        [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
        [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
        [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
        [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
        [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
        [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
        [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
        [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
        [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
        [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
        [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
        [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
        [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
        [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
        [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
        [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
        [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
        [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
        [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
        [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
        [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
    ]

    ppaData.seriesDataList = [
        { value: 948, name: '机具A' },
        { value: 735, name: '机具B' },
        { value: 580, name: '机具C' },
        { value: 484, name: '机具D' },
        { value: 300, name: '机具E' }
    ]

    fcData.seriesDataList =  [
        { value: 60, name: '机具Ac' },
        { value: 40, name: '机具Be' },
        { value: 20, name: '机具Ck' },
        { value: 80, name: '机具Dh' },
        { value: 100,name: '机具En' }
    ]

    let sla = [[],[],[],[],[]]
    for (let index = 0; index < 12; index++) {
        let num1 = Math.floor(Math.random() * (1000 - 10 + 10)) + 10;
        slaData.xAxisDataList.push((index+1)+'月')
        sla[0].push(num1*Math.random().toFixed(4)*10)
        sla[1].push(num1*Math.random().toFixed(4)*0.9)
        sla[2].push(num1*Math.random().toFixed(4)*12)
        sla[3].push(num1*Math.random().toFixed(4)*5)
        sla[4].push(num1*Math.random().toFixed(4)*3)
    }
    slaData.seriesDataList = [...sla]
    cshow.value = true
}
init()
</script>

<style scoped>
.page-bg {
    /* width: 100%; */
    min-width: 1920px;
    min-height: 100vh;
    background: url('../assets/twelve-bg.jpg') no-repeat center;
    background-size: 100% 100%;
    color: #fff;
}
.header-box {
    width: 100%;
    height: 60px;
    background-color: #203459;
    padding: 0 20px;
}
.header-name {
    width: 50%;
    height: 60px;
    background: linear-gradient(to right, #203459, #1a6684, #203459);
    font-size: 20px;
    font-weight: 600;
}
.main-box {
    margin: 20px;
}
.chart-box {
    min-height: 200px;
    border-radius: 16px;
    background: linear-gradient(to bottom, #232651, #21386290, #1a416e);
    border: 1px solid #1495ab;
    padding: 5px 8px;
    margin-bottom: 20px;
}
.chart-box-title {
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 18px;
    color: #ffffff;
}
.chart-box-title > span {
    color: #e8b432;
}
.chart-box-title > em {
    font-size: 12px;
    font-style: normal;   
}
.table-box p {
    /* width: 100%; */
    height: 20px;
    padding-right: 20px;
    margin-top: 10px;
    margin-bottom: 12px;
    background: linear-gradient(to right, #232651, #213862, #15e6cd);
    border-radius: 0 50px;
}
.ml8 {
    margin-left: 8px;
}
.pl20 { padding-left: 20px; }
:deep(.n-data-table.n-data-table--bordered .n-data-table-wrapper) {
    border-color: #15e6cd60;
}
:deep(.row-data td) {
    background-color: #02082c;
    color: #fefefe;
    border-bottom: 1px solid #15e6cd60;
    border-right: 1px solid #15e6cd60;
    padding: 2px;
}
:deep(.n-data-table .n-data-table-th) {
    background-color: #15e6cd;
    color: #1a6684;
    border: 1px solid #15e6cd; 
    padding: 2px;
}
:deep(.n-data-table .n-data-table-tr:not(.n-data-table-tr--summary):hover > .n-data-table-td) {
    background-color: #02082c;
    color: #fefefe;
} 
</style>
